/* eslint-disable default-case */
import React, { Component } from 'react';
import { Row, Col, Avatar, Menu, Upload, Button, Layout, Spin, message} from 'antd'
import styles from './style.less'
import header from '@assets/header.jpg'
import MyOrders from './MyOrders/index'
import ImgCrop from 'antd-img-crop'
import MyInformation from './MyInformation/index'
import { IconFont } from '@utils/request';
import { connect } from 'react-redux';
import * as actions from './store/action';
import {ServerIP} from '@utils/request';

class Index extends Component {
    constructor(props) {
        super(props);
        this.state = {
            comName: 'UserInformation',
            booleanPc: true,
            headPicturePath: '',
            loading: false,
        }
    }
    showCom = (comName) => {
        switch (comName) {
            case 'UserInformation':
                return <MyInformation personalCenter={this.props.personalCenter}/>
            case 'Other':
                return <MyOrders/>
        }
    }
    handleClick = (value) => {
        this.setState({
            comName: value.key
        });
    }
    componentDidMount() {
        this.props.getPersonalCenterRequest()
    }
    //上传照片的回调函数
    uploadFile = ({ file, fileList }) => {
        if (file.status === 'done') {
            if (file.response !== undefined) {
                if (file.response.response.res) {
                    message.success('图片上传成功', 1);
                    this.setState({
                        headPortraitPath: file.response.response.message
                    })
                    this.props.modifyUserHeadPortrait(this.state.headPortraitPath)
                } else {
                    message.error(file.response.exception, 1);
                }
            }
        } else if (file.status === 'uploading') {
        } else {
            message.error('图片上传失败, 请重新上传', 1);
            return;
        }
    }
    render() {
        const {comName}=this.state
        const { personalCenter}=this.props
        const uploadFileGrades = {
            name: "file",
            action: "/api/server/web/rest/FileUploadAndDownload/uploadFile",
            accept: 'image/*',
            onChange: this.uploadFile,
        }
        return (
            <Row className={styles.mainBody} >
                <Col span={4} className={styles.left}>
                    <div className={styles.left_top}>
                        <Avatar alt="头像" shape='circle' size={150} src={personalCenter.headPortraitPath == "" ? header : ServerIP + personalCenter.headPortraitPath}/>
                        <ImgCrop
                            className={styles.imgCrop}
                            width={600} //裁剪宽度
                            height={600} //裁剪高度
                            resizeAndDrag={true} //裁剪是否可以调整大小、可拖动
                            modalTitle="上传图片" //弹窗标题
                            modalWidth={600} //弹窗宽度
                        >
                            <Upload {...uploadFileGrades}
                                showUploadList={false}
                            >
                                <Button style={{ fontSize: '12px' }} type="link">
                                    修改头像
                                </Button>
                            </Upload>
                        </ImgCrop>
                    </div>
                    <div className={styles.left_bottom}>
                        <Menu mode="inline" onClick={this.handleClick}  defaultSelectedKeys={[comName]}>
                            <Menu.Item key="UserInformation" icon={<IconFont type="icon-xiugaiyonghujibenxinxi" style={{ fontSize: "20px", marginRight: '10px' }} />}>
                               基本信息
                            </Menu.Item>
                            <Menu.Item key="Other" icon={ <IconFont type="icon-xinxiguanli" style={{ fontSize: "20px", marginRight: '10px' }} />}>
                               订单管理
                            </Menu.Item>
                        </Menu>
                    </div>
                </Col>
                <Col span={20} >
                    <div className={styles.right}>
                        {this.showCom(comName)}
                    </div>
                </Col>
            </Row>
           
        );
    }
}
const mapStateToProps = (state) => ({
    personalCenter: state.personalCenterConfig.personalCenter,

})
const mapDispatchToProps = (dispatch) => ({
    getPersonalCenterRequest() {
        dispatch(actions.getPersonalCenterRequest())
    },
    modifyUserHeadPortrait(obj) {
        dispatch(actions.modifyUserHeadPortrait(obj))
    },
   
})
export default connect(mapStateToProps, mapDispatchToProps)(Index);
